<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>表单 Form | BIN-UI-DESIGN</title>
    <meta name="description" content="A Compontnts Lib for Vue3">
    <link rel="preload stylesheet" href="/bin-ui-design/assets/style.c1bcbbc4.css" as="style">
    
    <script type="module" src="/bin-ui-design/assets/app.e7678c4e.js"></script>
    <link rel="preload" href="/bin-ui-design/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/framework.ef1b8cce.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/theme.feefc56e.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/preset.a505c3e9.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/dayjs.min.04d70162.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/components_form.md.5d25e7cb.lean.js">
    <link rel="icon" href="/bin-ui-design/favicon.ico">
    <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body><div class="bin-select__popper bin-popper is-light is-pure" style="z-index:2210;display:none;" id="bin-popper-4464" role="tooltip"><!--[--><div class="bin-select-dropdown" style="min-width:;"><!--[--><div class="bin-scrollbar"><div class="bin-select-dropdown__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-select-dropdown__list" style=""><!--[--><!----><!--[--><li style="" class="bin-select-dropdown__item"><!--[--><span>上海</span><!--]--></li><li style="" class="bin-select-dropdown__item"><!--[--><span>北京</span><!--]--></li><li style="" class="bin-select-dropdown__item"><!--[--><span>南京</span><!--]--></li><li style="" class="bin-select-dropdown__item"><!--[--><span>徐州</span><!--]--></li><!--]--><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--[--><p class="bin-select-dropdown__empty">暂无数据</p><!--]--><!--]--></div><!--]--><!----></div><!--teleport anchor--><div class="bin-select__popper bin-popper is-light is-pure" style="z-index:2211;display:none;" id="bin-popper-3914" role="tooltip"><!--[--><div class="bin-select-dropdown" style="min-width:;"><!--[--><div class="bin-scrollbar"><div class="bin-select-dropdown__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-select-dropdown__list" style=""><!--[--><!----><!--[--><li style="" class="bin-select-dropdown__item"><!--[--><span>上海</span><!--]--></li><li style="" class="bin-select-dropdown__item"><!--[--><span>北京</span><!--]--></li><li style="" class="bin-select-dropdown__item"><!--[--><span>南京</span><!--]--></li><li style="" class="bin-select-dropdown__item"><!--[--><span>徐州</span><!--]--></li><!--]--><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--[--><p class="bin-select-dropdown__empty">暂无数据</p><!--]--><!--]--></div><!--]--><!----></div><!--teleport anchor--><div class="bin-popover bin-popper is-light" style="width:200px;z-index:2212;display:none;" id="bin-popper-5961" role="tooltip"><!--v-if--><!--[--><p><i class="b-iconfont b-icon-question-circle" style="color:var(--bin-color-danger);"></i> 确定切换吗？</p><div style="text-align:right;margin:0;"><button class="bin-button bin-button--mini bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->取消<!--]--></span></button><button class="bin-button bin-button--primary bin-button--mini" type="button"><!----><span class="bin-button__content" style=""><!--[-->确定<!--]--></span></button></div><!--]--><div class="bin-popper__arrow" data-popper-arrow></div></div><!--teleport anchor--><div class="bin-select__popper bin-popper is-light is-pure" style="z-index:2213;display:none;" id="bin-popper-1240" role="tooltip"><!--[--><div class="bin-select-dropdown" style="min-width:;"><!--[--><div class="bin-scrollbar"><div class="bin-select-dropdown__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-select-dropdown__list" style=""><!--[--><!----><!--[--><li style="" class="bin-select-dropdown__item"><!--[--><span>上海</span><!--]--></li><li style="" class="bin-select-dropdown__item"><!--[--><span>北京</span><!--]--></li><li style="" class="bin-select-dropdown__item"><!--[--><span>南京</span><!--]--></li><li style="" class="bin-select-dropdown__item selected"><!--[--><span>徐州</span><!--]--></li><!--]--><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--[--><p class="bin-select-dropdown__empty">暂无数据</p><!--]--><!--]--></div><!--]--><!----></div><!--teleport anchor--><div class="bin-select__popper bin-popper is-light is-pure" style="z-index:2214;display:none;" id="bin-popper-2410" role="tooltip"><!--[--><div class="bin-select-dropdown" style="min-width:;"><!--[--><div class="bin-scrollbar"><div class="bin-select-dropdown__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-select-dropdown__list" style=""><!--[--><!----><!--[--><li style="" class="bin-select-dropdown__item"><!--[--><span>上海</span><!--]--></li><li style="" class="bin-select-dropdown__item"><!--[--><span>北京</span><!--]--></li><li style="" class="bin-select-dropdown__item"><!--[--><span>南京</span><!--]--></li><li style="" class="bin-select-dropdown__item"><!--[--><span>徐州</span><!--]--></li><!--]--><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--[--><p class="bin-select-dropdown__empty">暂无数据</p><!--]--><!--]--></div><!--]--><!----></div><!--teleport anchor--><div class="bin-picker__popper bin-popper is-light is-pure" style="z-index:2215;display:none;" id="bin-popper-754" role="tooltip"><!--[--><!--[--><div class="bin-picker-panel bin-date-picker" actualvisible="false" unlinkpanels="false"><div class="bin-picker-panel__body-wrapper"><!--[--><!--]--><!----><div class="bin-picker-panel__body"><!----><div style="" class="bin-date-picker__header"><button type="button" aria-label="上一年" class="bin-picker-panel__icon-btn bin-date-picker__prev-btn"><i class="b-iconfont b-icon-doubleleft"></i></button><button style="" type="button" aria-label="上个月" class="bin-picker-panel__icon-btn bin-date-picker__prev-btn"><i class="b-iconfont b-icon-left"></i></button><span role="button" class="bin-date-picker__header-label">2025 年</span><span style="" role="button" class="bin-date-picker__header-label">9 月</span><button type="button" aria-label="下一年" class="bin-picker-panel__icon-btn bin-date-picker__next-btn"><i class="b-iconfont b-icon-doubleright"></i></button><button style="" type="button" aria-label="下个月" class="bin-picker-panel__icon-btn bin-date-picker__next-btn"><i class="b-iconfont b-icon-right"></i></button></div><div class="bin-picker-panel__content"><table cellspacing="0" cellpadding="0" class="bin-date-table"><tbody><tr><!----><!--[--><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th><!--]--></tr><!--[--><tr class="bin-date-table__row"><!--[--><td class="available today"><div><span>1</span></div></td><td class="available"><div><span>2</span></div></td><td class="available"><div><span>3</span></div></td><td class="available"><div><span>4</span></div></td><td class="available"><div><span>5</span></div></td><td class="available"><div><span>6</span></div></td><td class="available"><div><span>7</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>8</span></div></td><td class="available"><div><span>9</span></div></td><td class="available"><div><span>10</span></div></td><td class="available"><div><span>11</span></div></td><td class="available"><div><span>12</span></div></td><td class="available"><div><span>13</span></div></td><td class="available"><div><span>14</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>15</span></div></td><td class="available"><div><span>16</span></div></td><td class="available"><div><span>17</span></div></td><td class="available"><div><span>18</span></div></td><td class="available"><div><span>19</span></div></td><td class="available"><div><span>20</span></div></td><td class="available"><div><span>21</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>22</span></div></td><td class="available"><div><span>23</span></div></td><td class="available"><div><span>24</span></div></td><td class="available"><div><span>25</span></div></td><td class="available"><div><span>26</span></div></td><td class="available"><div><span>27</span></div></td><td class="available"><div><span>28</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>29</span></div></td><td class="available"><div><span>30</span></div></td><td class="next-month"><div><span>1</span></div></td><td class="next-month"><div><span>2</span></div></td><td class="next-month"><div><span>3</span></div></td><td class="next-month"><div><span>4</span></div></td><td class="next-month"><div><span>5</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="next-month"><div><span>6</span></div></td><td class="next-month"><div><span>7</span></div></td><td class="next-month"><div><span>8</span></div></td><td class="next-month"><div><span>9</span></div></td><td class="next-month"><div><span>10</span></div></td><td class="next-month"><div><span>11</span></div></td><td class="next-month"><div><span>12</span></div></td><!--]--></tr><!--]--></tbody></table><!----><!----></div></div></div><div style="display:none;" class="bin-picker-panel__footer"><button class="bin-button bin-button--mini bin-button--text bin-picker-panel__link-btn" type="button" style=""><!----><span class="bin-button__content" style=""><!--[--> 此刻 <!--]--></span></button><button class="bin-button bin-button--primary bin-button--mini bin-picker-panel__link-btn" type="button"><!----><span class="bin-button__content" style=""><!--[--> 确定 <!--]--></span></button></div></div><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-popover bin-popper is-light" style="width:200px;z-index:2216;display:none;" id="bin-popper-6437" role="tooltip"><!--v-if--><!--[--><p><i class="b-iconfont b-icon-question-circle" style="color:var(--bin-color-danger);"></i> 确定切换吗？</p><div style="text-align:right;margin:0;"><button class="bin-button bin-button--mini bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->取消<!--]--></span></button><button class="bin-button bin-button--primary bin-button--mini" type="button"><!----><span class="bin-button__content" style=""><!--[-->确定<!--]--></span></button></div><!--]--><div class="bin-popper__arrow" data-popper-arrow></div></div><!--teleport anchor-->
    <div id="app"><div class="Layout" data-v-10b21a41><!--[--><!--]--><!--[--><span tabindex="-1" data-v-adaaf041></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-adaaf041> Skip to content </a><!--]--><!----><header class="VPNav" data-v-10b21a41 data-v-53d5d812><div class="VPNavBar has-sidebar" data-v-53d5d812 data-v-9b495835><div class="container" data-v-9b495835><div class="title" data-v-9b495835><div class="VPNavBarTitle has-sidebar" data-v-9b495835 data-v-e8b3dcd3><a class="title" href="/bin-ui-design/" data-v-e8b3dcd3><!--[--><!--]--><!--[--><img class="VPImage logo" src="/bin-ui-design/logo.svg" alt data-v-8268b5c7><!--]--><!--[-->BIN-UI-DESIGN<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-9b495835><div class="curtain" data-v-9b495835></div><div class="content-body" data-v-9b495835><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-9b495835><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-9b495835 data-v-65dcea68><span id="main-nav-aria-label" class="visually-hidden" data-v-65dcea68>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/bin-ui-design/docs/introduction.html" tabindex="0" data-v-65dcea68 data-v-d94ce39d><!--[--><span data-v-d94ce39d>文档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/bin-ui-design/components/button.html" tabindex="0" data-v-65dcea68 data-v-d94ce39d><!--[--><span data-v-d94ce39d>组件</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-65dcea68 data-v-8d848982><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-8d848982><span class="text" data-v-8d848982><!----><span data-v-8d848982>生态系统</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-8d848982><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-8d848982><div class="VPMenu" data-v-8d848982 data-v-a89d4855><div class="items" data-v-a89d4855><!--[--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->资源<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-admin-pro/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-admin-pro<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-datav" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-datav<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-datav-schema/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-datav-schema<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->官方库v3<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-ui-next/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-ui-next<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-editor-next/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-editor-next<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-charts-next/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-charts-next<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->官方库v2<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-ui/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-ui<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-ace-editor/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-ace-editor<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-charts/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-charts<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-tree-org/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-tree-org<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->动画库<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-animation/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-animation<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-keyframe-animation/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-keyframe-animation<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-9b495835 data-v-6e555ce1><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-6e555ce1 data-v-843b33e0 data-v-1a25bfd8><span class="check" data-v-1a25bfd8><span class="icon" data-v-1a25bfd8><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-843b33e0><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-843b33e0><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-9b495835 data-v-e0d4c2fb data-v-54ca10e8><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wangbin3162/bin-ui-design" aria-label="github" target="_blank" rel="noopener" data-v-54ca10e8 data-v-f031c1b5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-9b495835 data-v-3ec7766a data-v-8d848982><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-8d848982><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-8d848982><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-8d848982><div class="VPMenu" data-v-8d848982 data-v-a89d4855><!----><!--[--><!--[--><!----><div class="group" data-v-3ec7766a><div class="item appearance" data-v-3ec7766a><p class="label" data-v-3ec7766a>Appearance</p><div class="appearance-action" data-v-3ec7766a><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-3ec7766a data-v-843b33e0 data-v-1a25bfd8><span class="check" data-v-1a25bfd8><span class="icon" data-v-1a25bfd8><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-843b33e0><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-843b33e0><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-3ec7766a><div class="item social-links" data-v-3ec7766a><div class="VPSocialLinks social-links-list" data-v-3ec7766a data-v-54ca10e8><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wangbin3162/bin-ui-design" aria-label="github" target="_blank" rel="noopener" data-v-54ca10e8 data-v-f031c1b5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-9b495835 data-v-0a67234a><span class="container" data-v-0a67234a><span class="top" data-v-0a67234a></span><span class="middle" data-v-0a67234a></span><span class="bottom" data-v-0a67234a></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-10b21a41 data-v-eddb4634><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-eddb4634><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-eddb4634><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-eddb4634>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-eddb4634 data-v-b2855fa6><button data-v-b2855fa6>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-10b21a41 data-v-2abe540d><div class="curtain" data-v-2abe540d></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-2abe540d><span class="visually-hidden" id="sidebar-aria-label" data-v-2abe540d> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>通用组件 (8)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/icon.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-fire"></i>图标<span>Icon</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/button.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-Youtube"></i>按钮<span>Button</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/card.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-creditcard"></i>卡片<span>Card</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/collapse.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-interation"></i>折叠面板<span>Collapse</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/divider.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-line"></i>分割线<span>Divider</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/dropdown.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-caret-down"></i>下拉菜单<span>Dropdown</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/tag.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-tags"></i>标签<span>Tag</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/image.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-image"></i>图片<span>Image</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>布局组件 (4)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/layout.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-layout"></i>布局组件<span>Layout</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/grid.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-appstore"></i>栅格<span>Grid</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/space.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-swap"></i>间距<span>Space</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/split.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-block"></i>分割面板<span>Split</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0 has-active" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>数据录入组件 (14)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/input.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-edit-square"></i>输入框<span>Input</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/input-number.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-shake"></i>数字输入<span>InputNumber</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/radio.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-plus-circle"></i>单选框<span>Radio</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/checkbox.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-check-square"></i>多选框<span>Checkbox</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/switch.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-build"></i>开关<span>Switch</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/select.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-unorderedlist"></i>选择器<span>Select</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/cascader.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-pic-left"></i>级联选择<span>Cascader</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/date-picker.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-calendar"></i>日期选择器<span>DatePicker</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/time-picker.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-time-circle"></i>时间选择器<span>TimePicker</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/color-picker.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-bg-colors"></i>颜色选择器<span>ColorPicker</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/rate.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-star"></i>评分<span>Rate</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/slider.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-minus"></i>滑块<span>Slider</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/upload.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-cloud-upload"></i>上传<span>Upload</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/form.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-reconciliation"></i>表单<span>Form</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>数据展示组件 (9)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/tree.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-branches"></i>树结构<span>Tree</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/table.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-table"></i>表格<span>Table</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/page.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-read"></i>分页<span>Page</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/desc.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-unorderedlist"></i>描述<span>Desc</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/timeline.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-arrowdown"></i>时间线<span>Timeline</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/calendar.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-calendar-fill"></i>日历<span>Calendar</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/carousel.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-appstore-fill"></i>轮播<span>Carousel</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/count-to.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-orderedlist"></i>数字动画<span>CountTo</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/trend.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-caret-up"></i>趋势标记<span>Trend</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>导航组件 (8)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/affix.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-pushpin"></i>图钉<span>Affix</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/anchor.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-attachment"></i>锚点<span>Anchor</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/back-top.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-up"></i>返回顶部<span>BackTop</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/breadcrumb.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-right"></i>面包屑<span>Breadcrumb</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/loading-bar.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-minus"></i>加载条<span>Loading Bar</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/menu.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-menu"></i>菜单<span>Menu</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/tabs.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-project"></i>标签页<span>Tabs</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/steps.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-arrowright"></i>步骤<span>Steps</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>反馈组件 (13)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/alert.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-error-fill"></i>警告信息<span>Alert</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/badge.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-border"></i>标记<span>Badge</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/modal.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-idcard"></i>模态框<span>Modal</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/message.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-message"></i>消息提示<span>Message</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/message-box.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-mail"></i>弹框提示<span>MessageBox</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/notice.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-notification"></i>通知<span>Notice</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/tooltip.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-info-circle"></i>弹出提示<span>Tooltip</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/popover.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-question-circle"></i>弹出信息<span>Popover</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/drawer.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-build"></i>抽屉<span>Drawer</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/skeleton.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-sever-fill"></i>骨架屏<span>Skeleton</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/loading.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-loading"></i>加载<span>Loading</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/progress.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-hourglass"></i>进度条<span>Progress</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/circle.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-redo"></i>进度环<span>Circle</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>内置组件 (4)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/empty.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-border"></i>空状态<span>Empty</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/scrollbar.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-container"></i>滚动组件<span>Scrollbar</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/popper.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-pic-center"></i>弹层<span>Popper</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/contextmenu.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-menu"></i>右键菜单<span>Contextmenu</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>配置组件 (1)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/config-provider.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-setting"></i>全局配置<span>ConfigProvider</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-10b21a41 data-v-4d31e3f3><div class="VPDoc has-sidebar has-aside" data-v-4d31e3f3 data-v-9f9999b2><!--[--><!--]--><div class="container" data-v-9f9999b2><div class="aside" data-v-9f9999b2><div class="aside-curtain" data-v-9f9999b2></div><div class="aside-container" data-v-9f9999b2><div class="aside-content" data-v-9f9999b2><div class="VPDocAside" data-v-9f9999b2 data-v-1658cfd8><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-1658cfd8 data-v-667990eb><div class="content" data-v-667990eb><div class="outline-marker" data-v-667990eb></div><div class="outline-title" data-v-667990eb>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-667990eb><span class="visually-hidden" id="doc-outline-aria-label" data-v-667990eb> Table of Contents for current page </span><ul class="root" data-v-667990eb data-v-d7e7591d><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-1658cfd8></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-9f9999b2><div class="content-container" data-v-9f9999b2><!--[--><!--]--><!----><main class="main" data-v-9f9999b2><div style="position:relative;" class="vp-doc _bin-ui-design_components_form" data-v-9f9999b2><div><!----><h1 id="表单-form" tabindex="-1">表单 Form <a class="header-anchor" href="#表单-form" aria-label="Permalink to &quot;表单 Form&quot;">​</a></h1><p>由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据</p><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to &quot;基础用法&quot;">​</a></h2><p>基础的表单使用，表单项，比如输入框、选择器、开关、单选框、多选框等。</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Form\Basic.vue" relativepath="./demo/Form/Basic.vue"><section class="vitepress-demo-preview-preview"><!--[--><div style="width:500px;"><form class="bin-form"><!--[--><div class="bin-form-item"><!--[--><label class="bin-form-item__label" style="width:100px;"><!--[-->姓名<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input" placeholder="输入姓名" value="" number="false"><!----><!----><!----><!----><!----><!--]--></div><!--]--><!----></div></div><div class="bin-form-item"><!--[--><label class="bin-form-item__label" style="width:100px;"><!--[-->年龄<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-input-number"><!--[--><span class="bin-input-number-handler bin-input-number-handler-up"><span class="bin-input-number-handler-up-inner b-iconfont b-icon-up"></span></span><span class="bin-input-number-handler bin-input-number-handler-down"><span class="bin-input-number-handler-down-inner b-iconfont b-icon-down"></span></span><!--]--><div class="bin-input-number-input-wrap"><input class="bin-input-number-input" autocomplete="off" spellcheck="false" placeholder=""></div></div><!--]--><!----></div></div><div class="bin-form-item"><!--[--><label class="bin-form-item__label" style="width:100px;"><!--[-->户籍地<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-select"><!--[--><div class="select-trigger" aria-describedby="bin-popper-4464" style=""><!----><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="请选择" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="bin-select__caret b-iconfont b-icon-down"></i><!----><!--]--><!----></span><!----><!----><!----><!--]--></div></div><!--teleport start--><!--teleport end--><!--]--></div><!--]--><!----></div></div><div class="bin-form-item"><!--[--><label class="bin-form-item__label" style="width:100px;"><!--[-->学历<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-radio-group" role="radiogroup"><!--[--><label class="bin-radio" role="radio" aria-checked="false" aria-disabled="false" tabindex="-1"><span class="bin-radio__input"><span class="bin-radio__inner"></span><input class="bin-radio__original" value="高中" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[--><!--]--><!--[-->高中<!--]--></span></label><label class="bin-radio" role="radio" aria-checked="false" aria-disabled="false" tabindex="-1"><span class="bin-radio__input"><span class="bin-radio__inner"></span><input class="bin-radio__original" value="大专" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[--><!--]--><!--[-->大专<!--]--></span></label><label class="bin-radio" role="radio" aria-checked="false" aria-disabled="false" tabindex="-1"><span class="bin-radio__input"><span class="bin-radio__inner"></span><input class="bin-radio__original" value="本科" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[--><!--]--><!--[-->本科<!--]--></span></label><label class="bin-radio" role="radio" aria-checked="false" aria-disabled="false" tabindex="-1"><span class="bin-radio__input"><span class="bin-radio__inner"></span><input class="bin-radio__original" value="硕士" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[--><!--]--><!--[-->硕士<!--]--></span></label><!--]--></div><!--]--><!----></div></div><div class="bin-form-item"><!--[--><label class="bin-form-item__label" style="width:100px;"><!--[-->爱好<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-checkbox-group" role="group" aria-label="checkbox-group"><!--[--><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="打游戏" name="hobby"></span><span class="bin-checkbox__label"><!--[--><!--]--><!--[-->打游戏<!--]--></span></label><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="看电影" name="hobby"></span><span class="bin-checkbox__label"><!--[--><!--]--><!--[-->看电影<!--]--></span></label><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="打篮球/运动" name="hobby"></span><span class="bin-checkbox__label"><!--[--><!--]--><!--[-->打篮球/运动<!--]--></span></label><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="看书" name="hobby"></span><span class="bin-checkbox__label"><!--[--><!--]--><!--[-->看书<!--]--></span></label><!--]--></div><!--]--><!----></div></div><div class="bin-form-item"><!--[--><label class="bin-form-item__label" style="width:100px;"><!--[-->住址<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-input-wrapper bin-input-type-textarea"><!--[--><textarea wrap="soft" autocomplete="off" class="bin-input" style="" placeholder="请输入住址..." rows="2"></textarea><!----><!--]--></div><!--]--><!----></div></div><div class="bin-form-item"><!--[--><!----><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);padding-left:100px;"><!--[--><button class="bin-button bin-button--primary" type="button"><!----><span class="bin-button__content" style=""><!--[-->提交<!--]--></span></button><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->取消<!--]--></span></button><!--]--><!----></div></div><!--]--></form></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 500px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">ref</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;form&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label-width</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;100px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;姓名&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.name&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;输入姓名&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;年龄&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input-number</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.age&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input-number</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;户籍地&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-select</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.region&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;请选择户籍地&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-option</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;上海&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;shanghai&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-option</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-option</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;北京&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;beijing&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-option</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-option</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;南京&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;nanjing&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-option</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-option</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;徐州&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;xuzhou&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-option</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-select</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;学历&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio-group</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.edu&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;高中&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;大专&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;本科&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;硕士&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-radio-group</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;爱好&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-checkbox-group</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.hobby&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;打游戏&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;hobby&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;看电影&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;hobby&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;打篮球/运动&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;hobby&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;看书&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;hobby&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-checkbox-group</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;住址&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.address&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;textarea&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;请输入住址...&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;primary&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;onSubmit&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">提交</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">取消</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">formObj</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">null</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  region</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  city</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  edu</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  hobby</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> []</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span></span>
<span class="line"><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">onSubmit</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;submit!&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">formObj</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 500px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-form</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">ref</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;form&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label-width</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;100px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;姓名&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-input</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.name&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;输入姓名&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;年龄&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-input-number</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.age&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-input-number</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;户籍地&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-select</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.region&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;请选择户籍地&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-option</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;上海&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;shanghai&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-option</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-option</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;北京&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;beijing&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-option</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-option</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;南京&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;nanjing&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-option</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-option</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;徐州&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;xuzhou&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-option</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-select</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;学历&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-radio-group</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.edu&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;高中&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;大专&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;本科&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;硕士&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-radio-group</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;爱好&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-checkbox-group</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.hobby&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;打游戏&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">name</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;hobby&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;看电影&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">name</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;hobby&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;打篮球/运动&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">name</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;hobby&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;看书&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">name</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;hobby&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-checkbox-group</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;住址&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-input</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.address&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;textarea&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;请输入住址...&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;primary&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;onSubmit&quot;</span><span style="color: #002339">&gt;提交&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;取消&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">b-form</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">formObj</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">({</span></span>
<span class="line"><span style="color: #002339">  name: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  age: </span><span style="color: #174781">null</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  region: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  city: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  edu: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  hobby: [],</span></span>
<span class="line"><span style="color: #002339">  address: </span><span style="color: #A44185">&#39;&#39;</span></span>
<span class="line"><span style="color: #002339">})</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">onSubmit</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;submit!&#39;</span><span style="color: #002339">, </span><span style="color: #2F86D2">formObj</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="行内表单" tabindex="-1">行内表单 <a class="header-anchor" href="#行内表单" aria-label="Permalink to &quot;行内表单&quot;">​</a></h2><p>表单内容项比较少的情况可以使用行内模式</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Form\Inline.vue" relativepath="./demo/Form/Inline.vue"><section class="vitepress-demo-preview-preview"><!--[--><form class="bin-form bin-form--inline demo-form-inline"><!--[--><div class="bin-form-item"><!--[--><label class="bin-form-item__label" style=""><!--[-->姓名<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input" placeholder="输入姓名" value="" number="false"><!----><!----><!----><!----><!----><!--]--></div><!--]--><!----></div></div><div class="bin-form-item"><!--[--><label class="bin-form-item__label" style=""><!--[-->户籍地<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-select"><!--[--><div class="select-trigger" aria-describedby="bin-popper-3914" style=""><!----><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="请选择" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="bin-select__caret b-iconfont b-icon-down"></i><!----><!--]--><!----></span><!----><!----><!----><!--]--></div></div><!--teleport start--><!--teleport end--><!--]--></div><!--]--><!----></div></div><div class="bin-form-item"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><button class="bin-button bin-button--primary" type="button"><!----><span class="bin-button__content" style=""><!--[-->提交<!--]--></span></button><!--]--><!----></div></div><!--]--></form><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">ref</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;form&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">inline</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demo-form-inline&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;姓名&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.name&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;输入姓名&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;户籍地&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-select</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.region&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;请选择户籍地&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-option</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;上海&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;shanghai&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-option</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-option</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;北京&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;beijing&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-option</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-option</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;南京&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;nanjing&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-option</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-option</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;徐州&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;xuzhou&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-option</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-select</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;primary&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;onSubmit&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">提交</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">formObj</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  region</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span></span>
<span class="line"><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">onSubmit</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;submit!&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">formObj</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">b-form</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">ref</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;form&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">inline</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demo-form-inline&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;姓名&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-input</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.name&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;输入姓名&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;户籍地&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-select</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.region&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;请选择户籍地&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-option</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;上海&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;shanghai&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-option</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-option</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;北京&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;beijing&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-option</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-option</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;南京&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;nanjing&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-option</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-option</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;徐州&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;xuzhou&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-option</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-select</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;primary&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;onSubmit&quot;</span><span style="color: #002339">&gt;提交&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">b-form</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">formObj</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">({</span></span>
<span class="line"><span style="color: #002339">  name: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  region: </span><span style="color: #A44185">&#39;&#39;</span></span>
<span class="line"><span style="color: #002339">})</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">onSubmit</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;submit!&#39;</span><span style="color: #002339">, </span><span style="color: #2F86D2">formObj</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="对齐和尺寸" tabindex="-1">对齐和尺寸 <a class="header-anchor" href="#对齐和尺寸" aria-label="Permalink to &quot;对齐和尺寸&quot;">​</a></h2><p>可以有三种不同的标签对齐方式,纯文字需要包裹label标签</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Form\Aline.vue" relativepath="./demo/Form/Aline.vue"><section class="vitepress-demo-preview-preview"><!--[--><div><div class="bin-space bin-space--horizontal" style="align-items:center;"><div class="bin-space__item" style="padding-bottom:0px;margin-right:8px;"><!--[--> 对齐方式 <!--]--></div><div class="bin-space__item" style="padding-bottom:0px;margin-right:8px;"><!--[--><div class="bin-radio-group bin-radio-group-capsule" role="radiogroup"><!--[--><label class="bin-radio" role="radio" aria-checked="false" tabindex="-1"><span class="bin-radio__input"><span class="bin-radio__inner"></span><input class="bin-radio__original" value="left" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[-->左对齐<!--]--><!----></span></label><label class="bin-radio is-checked" role="radio" aria-checked="true" tabindex="0"><span class="is-checked bin-radio__input"><span class="bin-radio__inner"></span><input checked class="bin-radio__original" value="right" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[-->右对齐<!--]--><!----></span></label><label class="bin-radio" role="radio" aria-checked="false" tabindex="-1"><span class="bin-radio__input"><span class="bin-radio__inner"></span><input class="bin-radio__original" value="top" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[-->顶部对齐<!--]--><!----></span></label><!--]--></div><!--]--></div><div class="bin-space__item" style="padding-bottom:0px;margin-right:8px;"><!--[--> 尺寸大小 <!--]--></div><div class="bin-space__item" style="padding-bottom:0px;margin-right:8px;"><!--[--><div class="bin-radio-group bin-radio-group-capsule" role="radiogroup"><!--[--><label class="bin-radio" role="radio" aria-checked="false" tabindex="-1"><span class="bin-radio__input"><span class="bin-radio__inner"></span><input class="bin-radio__original" value="large" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[-->large<!--]--><!----></span></label><label class="bin-radio is-checked" role="radio" aria-checked="true" tabindex="0"><span class="is-checked bin-radio__input"><span class="bin-radio__inner"></span><input checked class="bin-radio__original" value="default" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[-->default<!--]--><!----></span></label><label class="bin-radio" role="radio" aria-checked="false" tabindex="-1"><span class="bin-radio__input"><span class="bin-radio__inner"></span><input class="bin-radio__original" value="small" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[-->small<!--]--><!----></span></label><label class="bin-radio" role="radio" aria-checked="false" tabindex="-1"><span class="bin-radio__input"><span class="bin-radio__inner"></span><input class="bin-radio__original" value="mini" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[-->mini<!--]--><!----></span></label><!--]--></div><!--]--></div><div class="bin-space__item" style="padding-bottom:0px;margin-right:8px;"><!--[--> 文字显示 <!--]--></div><div class="bin-space__item" style="padding-bottom:0px;"><!--[--><!--[--><span tabindex="0" class="bin-switch bin-switch-default" style="" ariadescribedby="bin-popper-5961"><input type="hidden" value="false"><span class="bin-switch-inner"><!----><!--[--><!--]--></span><!----></span><!--teleport start--><!--teleport end--><!--]--><!--]--></div></div><div style="width:500px;margin-top:20px;"><form class="bin-form bin-form--label-right"><!--[--><div class="bin-form-item bin-form-item--default"><!--[--><label class="bin-form-item__label" style="width:100px;"><!--[-->姓名<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-default" placeholder="输入姓名" value="张三" number="false"><!----><!----><!----><!----><!----><!--]--></div><!--]--><!----></div></div><div class="bin-form-item bin-form-item--default"><!--[--><label class="bin-form-item__label" style="width:100px;"><!--[-->年龄<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-input-number bin-input-number-default"><!--[--><span class="bin-input-number-handler bin-input-number-handler-up"><span class="bin-input-number-handler-up-inner b-iconfont b-icon-up"></span></span><span class="bin-input-number-handler bin-input-number-handler-down"><span class="bin-input-number-handler-down-inner b-iconfont b-icon-down"></span></span><!--]--><div class="bin-input-number-input-wrap"><input class="bin-input-number-input" autocomplete="off" spellcheck="false" value="18" placeholder=""></div></div><!--]--><!----></div></div><div class="bin-form-item bin-form-item--default"><!--[--><label class="bin-form-item__label" style="width:100px;"><!--[-->户籍地<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-select bin-select--default"><!--[--><div class="select-trigger" aria-describedby="bin-popper-1240" style=""><!----><div class="bin-input-wrapper bin-input-wrapper-default bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-default bin-input-with-suffix" placeholder="请选择" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="bin-select__caret b-iconfont b-icon-down"></i><!----><!--]--><!----></span><!----><!----><!----><!--]--></div></div><!--teleport start--><!--teleport end--><!--]--></div><!--]--><!----></div></div><div class="bin-form-item bin-form-item--default"><!--[--><label class="bin-form-item__label" style="width:100px;"><!--[-->学历<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-radio-group bin-radio-group-default" role="radiogroup"><!--[--><label class="bin-radio is-checked" role="radio" aria-checked="true" aria-disabled="false" tabindex="0"><span class="is-checked bin-radio__input"><span class="bin-radio__inner"></span><input checked class="bin-radio__original" value="高中" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[--><!--]--><!--[-->高中<!--]--></span></label><label class="bin-radio" role="radio" aria-checked="false" aria-disabled="false" tabindex="-1"><span class="bin-radio__input"><span class="bin-radio__inner"></span><input class="bin-radio__original" value="大专" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[--><!--]--><!--[-->大专<!--]--></span></label><label class="bin-radio" role="radio" aria-checked="false" aria-disabled="false" tabindex="-1"><span class="bin-radio__input"><span class="bin-radio__inner"></span><input class="bin-radio__original" value="本科" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[--><!--]--><!--[-->本科<!--]--></span></label><label class="bin-radio" role="radio" aria-checked="false" aria-disabled="false" tabindex="-1"><span class="bin-radio__input"><span class="bin-radio__inner"></span><input class="bin-radio__original" value="硕士" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[--><!--]--><!--[-->硕士<!--]--></span></label><!--]--></div><!--]--><!----></div></div><div class="bin-form-item bin-form-item--default"><!--[--><label class="bin-form-item__label" style="width:100px;"><!--[-->爱好<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-checkbox-group" role="group" aria-label="checkbox-group"><!--[--><label class="bin-checkbox is-checked"><span class="is-checked bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input checked class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="打游戏" name="hobby"></span><span class="bin-checkbox__label"><!--[--><!--]--><!--[-->打游戏<!--]--></span></label><label class="bin-checkbox is-checked"><span class="is-checked bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input checked class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="看电影" name="hobby"></span><span class="bin-checkbox__label"><!--[--><!--]--><!--[-->看电影<!--]--></span></label><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="打篮球/运动" name="hobby"></span><span class="bin-checkbox__label"><!--[--><!--]--><!--[-->打篮球/运动<!--]--></span></label><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="看书" name="hobby"></span><span class="bin-checkbox__label"><!--[--><!--]--><!--[-->看书<!--]--></span></label><!--]--></div><!--]--><!----></div></div><div class="bin-form-item bin-form-item--default"><!--[--><label class="bin-form-item__label" style="width:100px;"><!--[-->住址<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-input-wrapper bin-input-type-textarea"><!--[--><textarea wrap="soft" autocomplete="off" class="bin-input" style="" placeholder="请输入住址..." rows="2">徐州市鼓楼区</textarea><!----><!--]--></div><!--]--><!----></div></div><div class="bin-form-item bin-form-item--default"><!--[--><!----><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);padding-left:100px;"><!--[--><button class="bin-button bin-button--primary" type="button"><!----><span class="bin-button__content" style=""><!--[-->提交<!--]--></span></button><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->取消<!--]--></span></button><!--]--><!----></div></div><!--]--></form></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-space</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      对齐方式</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio-group</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;labelPosition&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;capsule&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;left&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">左对齐</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;right&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">右对齐</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;top&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">顶部对齐</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-radio-group</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      尺寸大小</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio-group</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;size&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;capsule&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;large&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">large</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;default&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">default</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">small</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mini&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">mini</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-radio-group</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      文字显示</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-switch</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;onlyText&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-switch</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-space</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 500px; margin-top: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:label-position</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;labelPosition&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label-width</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;100px&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;size&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;姓名&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-if</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;!onlyText&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.name&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;输入姓名&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">label</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-else</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ formObj.name }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">label</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;年龄&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input-number</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-if</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;!onlyText&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.age&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input-number</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">label</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-else</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ formObj.age }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">label</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;户籍地&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-select</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-if</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;!onlyText&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.city&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;请选择户籍地&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-option</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;上海&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;shanghai&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-option</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-option</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;北京&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;beijing&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-option</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-option</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;南京&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;nanjing&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-option</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-option</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;徐州&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;xuzhou&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-option</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-select</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">label</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-else</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ formObj.city }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">label</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;学历&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio-group</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-if</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;!onlyText&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.edu&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;高中&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;大专&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;本科&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;硕士&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-radio-group</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-else</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ formObj.edu }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;爱好&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-checkbox-group</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-if</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;!onlyText&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.hobby&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;打游戏&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;hobby&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;看电影&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;hobby&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;打篮球/运动&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;hobby&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;看书&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;hobby&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-checkbox-group</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-else</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ formObj.hobby }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;住址&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #C4A7E7; font-style: italic">v-if</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;!onlyText&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.address&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;textarea&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;请输入住址...&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-else</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ formObj.address }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA; font-style: italic">&lt;!--</span><span style="color: #6E6A86; font-style: italic"> &lt;b-form-item label=&quot;进度&quot;&gt;</span></span>
<span class="line"><span style="color: #6E6A86; font-style: italic">        &lt;b-slider&gt;&lt;/b-slider&gt;</span></span>
<span class="line"><span style="color: #6E6A86; font-style: italic">      &lt;/b-form-item&gt;</span></span>
<span class="line"><span style="color: #6E6A86; font-style: italic">      &lt;b-form-item label=&quot;颜色&quot;&gt;</span></span>
<span class="line"><span style="color: #6E6A86; font-style: italic">        &lt;b-color-picker&gt;&lt;/b-color-picker&gt;</span></span>
<span class="line"><span style="color: #6E6A86; font-style: italic">      &lt;/b-form-item&gt;</span></span>
<span class="line"><span style="color: #6E6A86; font-style: italic">      &lt;b-form-item label=&quot;评分&quot;&gt;</span></span>
<span class="line"><span style="color: #6E6A86; font-style: italic">        &lt;b-rate&gt;&lt;/b-rate&gt;</span></span>
<span class="line"><span style="color: #6E6A86; font-style: italic">      &lt;/b-form-item&gt;</span></span>
<span class="line"><span style="color: #6E6A86; font-style: italic">      &lt;b-form-item label=&quot;日期选择器&quot;&gt;</span></span>
<span class="line"><span style="color: #6E6A86; font-style: italic">        &lt;b-date-picker&gt;&lt;/b-date-picker&gt;</span></span>
<span class="line"><span style="color: #6E6A86; font-style: italic">      &lt;/b-form-item&gt;</span></span>
<span class="line"><span style="color: #6E6A86; font-style: italic">      &lt;b-form-item label=&quot;时间选择器&quot;&gt;</span></span>
<span class="line"><span style="color: #6E6A86; font-style: italic">        &lt;b-time-picker&gt;&lt;/b-time-picker&gt;</span></span>
<span class="line"><span style="color: #6E6A86; font-style: italic">      &lt;/b-form-item&gt;</span></span>
<span class="line"><span style="color: #6E6A86; font-style: italic">      &lt;b-form-item label=&quot;开关&quot;&gt;</span></span>
<span class="line"><span style="color: #6E6A86; font-style: italic">        &lt;b-switch&gt;&lt;/b-switch&gt;</span></span>
<span class="line"><span style="color: #6E6A86; font-style: italic">      &lt;/b-form-item&gt; </span><span style="color: #908CAA; font-style: italic">--&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-if</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;!onlyText&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;primary&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">提交</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">取消</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">labelPosition</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;right&#39;</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">size</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;default&#39;</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">onlyText</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">false</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">formObj</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张三&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  city</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuzhou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  edu</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;高中&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  hobby</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #F6C177">&#39;打游戏&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;看电影&#39;</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;徐州市鼓楼区&#39;</span></span>
<span class="line"><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-space</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      对齐方式</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-radio-group</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;labelPosition&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;capsule&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;left&quot;</span><span style="color: #002339">&gt;左对齐&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;right&quot;</span><span style="color: #002339">&gt;右对齐&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;top&quot;</span><span style="color: #002339">&gt;顶部对齐&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-radio-group</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      尺寸大小</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-radio-group</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;size&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;capsule&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;large&quot;</span><span style="color: #002339">&gt;large&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;default&quot;</span><span style="color: #002339">&gt;default&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span><span style="color: #002339">&gt;small&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mini&quot;</span><span style="color: #002339">&gt;mini&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-radio-group</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      文字显示</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-switch</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;onlyText&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-switch</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">b-space</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 500px; margin-top: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:label-position</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;labelPosition&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label-width</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;100px&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;size&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;姓名&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-input</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-if</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;!onlyText&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.name&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;输入姓名&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">label</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-else</span><span style="color: #002339">&gt;{{ formObj.name }}&lt;/</span><span style="color: #0444AC">label</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;年龄&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-input-number</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-if</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;!onlyText&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.age&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-input-number</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">label</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-else</span><span style="color: #002339">&gt;{{ formObj.age }}&lt;/</span><span style="color: #0444AC">label</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;户籍地&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-select</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-if</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;!onlyText&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.city&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;请选择户籍地&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-option</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;上海&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;shanghai&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-option</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-option</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;北京&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;beijing&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-option</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-option</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;南京&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;nanjing&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-option</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-option</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;徐州&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;xuzhou&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-option</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;/</span><span style="color: #0444AC">b-select</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">label</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-else</span><span style="color: #002339">&gt;{{ formObj.city }}&lt;/</span><span style="color: #0444AC">label</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;学历&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-radio-group</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-if</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;!onlyText&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.edu&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;高中&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;大专&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;本科&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;硕士&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;/</span><span style="color: #0444AC">b-radio-group</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-else</span><span style="color: #002339">&gt;{{ formObj.edu }}&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;爱好&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-checkbox-group</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-if</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;!onlyText&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.hobby&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;打游戏&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">name</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;hobby&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;看电影&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">name</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;hobby&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;打篮球/运动&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">name</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;hobby&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;看书&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">name</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;hobby&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;/</span><span style="color: #0444AC">b-checkbox-group</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-else</span><span style="color: #002339">&gt;{{ formObj.hobby }}&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;住址&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-input</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #DF8618; font-style: italic">v-if</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;!onlyText&quot;</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.address&quot;</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;textarea&quot;</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;请输入住址...&quot;</span></span>
<span class="line"><span style="color: #002339">          &gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-else</span><span style="color: #002339">&gt;{{ formObj.address }}&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #357B42; font-style: italic">&lt;!-- &lt;b-form-item label=&quot;进度&quot;&gt;</span></span>
<span class="line"><span style="color: #357B42; font-style: italic">        &lt;b-slider&gt;&lt;/b-slider&gt;</span></span>
<span class="line"><span style="color: #357B42; font-style: italic">      &lt;/b-form-item&gt;</span></span>
<span class="line"><span style="color: #357B42; font-style: italic">      &lt;b-form-item label=&quot;颜色&quot;&gt;</span></span>
<span class="line"><span style="color: #357B42; font-style: italic">        &lt;b-color-picker&gt;&lt;/b-color-picker&gt;</span></span>
<span class="line"><span style="color: #357B42; font-style: italic">      &lt;/b-form-item&gt;</span></span>
<span class="line"><span style="color: #357B42; font-style: italic">      &lt;b-form-item label=&quot;评分&quot;&gt;</span></span>
<span class="line"><span style="color: #357B42; font-style: italic">        &lt;b-rate&gt;&lt;/b-rate&gt;</span></span>
<span class="line"><span style="color: #357B42; font-style: italic">      &lt;/b-form-item&gt;</span></span>
<span class="line"><span style="color: #357B42; font-style: italic">      &lt;b-form-item label=&quot;日期选择器&quot;&gt;</span></span>
<span class="line"><span style="color: #357B42; font-style: italic">        &lt;b-date-picker&gt;&lt;/b-date-picker&gt;</span></span>
<span class="line"><span style="color: #357B42; font-style: italic">      &lt;/b-form-item&gt;</span></span>
<span class="line"><span style="color: #357B42; font-style: italic">      &lt;b-form-item label=&quot;时间选择器&quot;&gt;</span></span>
<span class="line"><span style="color: #357B42; font-style: italic">        &lt;b-time-picker&gt;&lt;/b-time-picker&gt;</span></span>
<span class="line"><span style="color: #357B42; font-style: italic">      &lt;/b-form-item&gt;</span></span>
<span class="line"><span style="color: #357B42; font-style: italic">      &lt;b-form-item label=&quot;开关&quot;&gt;</span></span>
<span class="line"><span style="color: #357B42; font-style: italic">        &lt;b-switch&gt;&lt;/b-switch&gt;</span></span>
<span class="line"><span style="color: #357B42; font-style: italic">      &lt;/b-form-item&gt; --&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-if</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;!onlyText&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;primary&quot;</span><span style="color: #002339">&gt;提交&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;取消&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">labelPosition</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;right&#39;</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">size</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;default&#39;</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">onlyText</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">false</span><span style="color: #002339">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">formObj</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">({</span></span>
<span class="line"><span style="color: #002339">  name: </span><span style="color: #A44185">&#39;张三&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  city: </span><span style="color: #A44185">&#39;xuzhou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  edu: </span><span style="color: #A44185">&#39;高中&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  hobby: [</span><span style="color: #A44185">&#39;打游戏&#39;</span><span style="color: #002339">, </span><span style="color: #A44185">&#39;看电影&#39;</span><span style="color: #002339">],</span></span>
<span class="line"><span style="color: #002339">  address: </span><span style="color: #A44185">&#39;徐州市鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">})</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="没有label显示" tabindex="-1">没有label显示 <a class="header-anchor" href="#没有label显示" aria-label="Permalink to &quot;没有label显示&quot;">​</a></h2><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Form\NoLabel.vue" relativepath="./demo/Form/NoLabel.vue"><section class="vitepress-demo-preview-preview"><!--[--><div style="width:500px;"><form class="bin-form"><!--[--><div class="bin-form-item"><!--[--><!----><!--]--><div class="bin-form-item__content" style="width:calc(100% - undefined);"><!--[--><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input" placeholder="输入用户名" value="" number="false"><!----><!----><!----><!----><!----><!--]--></div><!--]--><!----></div></div><div class="bin-form-item"><!--[--><!----><!--]--><div class="bin-form-item__content" style="width:calc(100% - undefined);"><!--[--><div class="bin-input-wrapper bin-input-type-password"><!--[--><!----><input autocomplete="new-password" type="password" class="bin-input" placeholder="输入用户名" value="" number="false"><!----><!----><!----><!----><!----><!--]--></div><!--]--><!----></div></div><div class="bin-form-item"><!--[--><!----><!--]--><div class="bin-form-item__content" style="width:calc(100% - undefined);"><!--[--><button class="bin-button bin-button--primary" type="button" style="width:100%;"><!----><span class="bin-button__content" style=""><!--[-->登录<!--]--></span></button><!--]--><!----></div></div><!--]--></form></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 500px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.username&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;输入用户名&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.password&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;输入用户名&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;password&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;primary&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 100%&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">登录</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">formObj</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  username</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  password</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span></span>
<span class="line"><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 500px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-form</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-input</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.username&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;输入用户名&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-input</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.password&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;输入用户名&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;password&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;primary&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 100%&quot;</span><span style="color: #002339">&gt;登录&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">b-form</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">formObj</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">({</span></span>
<span class="line"><span style="color: #002339">  username: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  password: </span><span style="color: #A44185">&#39;&#39;</span></span>
<span class="line"><span style="color: #002339">})</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="表单校验" tabindex="-1">表单校验 <a class="header-anchor" href="#表单校验" aria-label="Permalink to &quot;表单校验&quot;">​</a></h2><p>提供基础的校验规则，校验规则参考 <a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noreferrer">async-validator</a></p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Form\Validator.vue" relativepath="./demo/Form/Validator.vue"><section class="vitepress-demo-preview-preview"><!--[--><div style="width:500px;"><form class="bin-form"><!--[--><div class="bin-form-item bin-form-item--feedback is-required"><!--[--><label for="name" class="bin-form-item__label" style="width:100px;"><!--[-->名称<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input" placeholder="用户名" value="" number="false"><!----><!----><!----><!----><!----><!--]--></div><!--]--><!----></div></div><div class="bin-form-item bin-form-item--feedback is-required"><!--[--><label for="mail" class="bin-form-item__label" style="width:100px;"><!--[-->邮箱<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input" placeholder="邮箱" value="" number="false"><!----><!----><!----><!----><!----><!--]--></div><!--]--><!----></div></div><div class="bin-row" style=""><!--[--><div class="bin-col bin-col-span-12" style=""><!--[--><div class="bin-form-item bin-form-item--feedback is-required"><!--[--><label for="age" class="bin-form-item__label" style="width:100px;"><!--[-->年龄<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-input-number" style="width:100%;"><!--[--><span class="bin-input-number-handler bin-input-number-handler-up"><span class="bin-input-number-handler-up-inner b-iconfont b-icon-up"></span></span><span class="bin-input-number-handler bin-input-number-handler-down"><span class="bin-input-number-handler-down-inner b-iconfont b-icon-down"></span></span><!--]--><div class="bin-input-number-input-wrap"><input class="bin-input-number-input" autocomplete="off" spellcheck="false" placeholder=""></div></div><!--]--><!----></div></div><!--]--></div><div class="bin-col bin-col-span-12" style=""><!--[--><div class="bin-form-item bin-form-item--feedback is-required"><!--[--><label for="region" class="bin-form-item__label" style="width:100px;"><!--[-->户籍地<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-select"><!--[--><div class="select-trigger" aria-describedby="bin-popper-2410" style=""><!----><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="请选择" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="bin-select__caret b-iconfont b-icon-down"></i><!----><!--]--><!----></span><!----><!----><!----><!--]--></div></div><!--teleport start--><!--teleport end--><!--]--></div><!--]--><!----></div></div><!--]--></div><!--]--></div><div class="bin-form-item bin-form-item--feedback is-required"><!--[--><label for="birthday" class="bin-form-item__label" style="width:100px;"><!--[-->出生日期<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><!--[--><div class="bin-input-wrapper bin-input-type-text bin-date-editor bin-date-editor--date" aria-describedby="bin-popper-754" style=""><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-prefix bin-input-with-suffix" placeholder="出生日期" name="" value="" number="false"><span class="bin-input-prefix"><!--[--><i class="b-iconfont b-icon-calendar"></i><!--]--></span><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!--teleport start--><!--teleport end--><!--]--><!--]--><!----></div></div><div class="bin-form-item bin-form-item--feedback is-required"><!--[--><label for="hobby" class="bin-form-item__label" style="width:100px;"><!--[-->爱好<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-checkbox-group" role="group" aria-label="checkbox-group"><!--[--><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="打游戏" name="hobby"></span><span class="bin-checkbox__label"><!--[--><!--]--><!--[-->打游戏<!--]--></span></label><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="看电影" name="hobby"></span><span class="bin-checkbox__label"><!--[--><!--]--><!--[-->看电影<!--]--></span></label><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="打篮球/运动" name="hobby"></span><span class="bin-checkbox__label"><!--[--><!--]--><!--[-->打篮球/运动<!--]--></span></label><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="看书" name="hobby"></span><span class="bin-checkbox__label"><!--[--><!--]--><!--[-->看书<!--]--></span></label><!--]--></div><!--]--><!----></div></div><div class="bin-form-item bin-form-item--feedback is-required"><!--[--><label for="sex" class="bin-form-item__label" style="width:100px;"><!--[-->性别<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-radio-group" role="radiogroup"><!--[--><label class="bin-radio" role="radio" aria-checked="false" aria-disabled="false" tabindex="-1" value="male"><span class="bin-radio__input"><span class="bin-radio__inner"></span><input class="bin-radio__original" value="男" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[--><!--]--><!--[-->男<!--]--></span></label><label class="bin-radio" role="radio" aria-checked="false" aria-disabled="false" tabindex="-1" value="female"><span class="bin-radio__input"><span class="bin-radio__inner"></span><input class="bin-radio__original" value="女" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[--><!--]--><!--[-->女<!--]--></span></label><!--]--></div><!--]--><!----></div></div><div class="bin-form-item bin-form-item--feedback"><!--[--><label for="status" class="bin-form-item__label" style="width:100px;"><!--[-->状态<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><!--[--><span tabindex="0" class="bin-switch bin-switch-large" style="" ariadescribedby="bin-popper-6437"><input type="hidden" value="disable"><span class="bin-switch-inner"><!----><!--[--><span>禁用</span><!--]--></span><!----></span><!--teleport start--><!--teleport end--><!--]--><!--]--><!----></div></div><div class="bin-form-item bin-form-item--feedback"><!--[--><!----><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);padding-left:100px;"><!--[--><button class="bin-button bin-button--primary" type="button"><!----><span class="bin-button__content" style=""><!--[-->提交<!--]--></span></button><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->重置<!--]--></span></button><!--]--><!----></div></div><!--]--></form></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 500px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">ref</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ruleForm&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">status-icon</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label-width</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;100px&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:rules</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ruleValidate&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">prop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;name&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;名称&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.name&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;用户名&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">prop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mail&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;邮箱&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.mail&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;邮箱&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">clearable</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-row</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-col</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:span</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;12&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">prop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;age&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;年龄&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input-number</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.age&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 100%&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input-number</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-col</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-col</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:span</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;12&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;户籍地&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">prop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;region&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-select</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.region&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;请选择户籍地&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">clearable</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-option</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;上海&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;shanghai&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-option</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-option</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;北京&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;beijing&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-option</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-option</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;南京&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;nanjing&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-option</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-option</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;徐州&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;xuzhou&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-option</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-select</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-col</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-row</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;出生日期&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">prop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;birthday&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-date-picker</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.birthday&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;date&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;出生日期&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-date-picker</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;爱好&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">prop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;hobby&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-checkbox-group</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.hobby&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;打游戏&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;hobby&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;看电影&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;hobby&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;打篮球/运动&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;hobby&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;看书&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;hobby&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-checkbox</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-checkbox-group</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;性别&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">prop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;sex&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio-group</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.sex&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;男&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;male&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;女&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;female&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-radio-group</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;状态&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">prop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;status&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-switch</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formObj.status&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">true-value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;enable&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">false-value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;disable&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;large&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">open</span><span style="color: #6E6A86">&gt;&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">启用</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">close</span><span style="color: #6E6A86">&gt;&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">禁用</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-switch</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;primary&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;submitForm&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">提交</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;resetForm&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">重置</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">ruleValidate</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> required</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> message</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;用户名不能为空&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;blur&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  region</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> required</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> message</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;户籍地不能为空&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;change&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> required</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> type</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;number&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> message</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄不为空&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;change&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> type</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;number&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> min</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;change&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> message</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄必须在18以上&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  ]</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  hobby</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> type</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;array&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> required</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> message</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;请至少选择一个爱好&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;change&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  sex</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> required</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> message</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;性别必选&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;change&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> required</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> type</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;date&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> message</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期必选&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;blur&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  mail</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> required</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> message</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;邮箱不能为空&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;blur&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> type</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;email&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> message</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;邮箱格式不正确&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;blur&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  ]</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">ruleForm</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">null</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">formObj</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">null</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  mail</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  region</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  hobby</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> []</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  sex</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;disable&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span></span>
<span class="line"><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">submitForm</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">ruleForm</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">?.</span><span style="color: #EA9A97">validate</span><span style="color: #E0DEF4">(</span><span style="color: #C4A7E7; font-style: italic">valid</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">valid</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #EA9A97">alert</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;submit!&#39;</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">else</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;error submit!!&#39;</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">false</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">resetForm</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">ruleForm</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">?.</span><span style="color: #EA9A97">resetFields</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 500px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-form</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">ref</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ruleForm&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">status-icon</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label-width</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;100px&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:rules</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ruleValidate&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">prop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;name&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;名称&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-input</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.name&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;用户名&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">prop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mail&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;邮箱&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-input</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.mail&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;邮箱&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">clearable</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-row</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-col</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:span</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;12&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">prop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;age&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;年龄&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-input-number</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.age&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 100%&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-input-number</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-col</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-col</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:span</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;12&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;户籍地&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">prop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;region&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-select</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.region&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;请选择户籍地&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">clearable</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">              &lt;</span><span style="color: #0444AC">b-option</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;上海&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;shanghai&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-option</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">              &lt;</span><span style="color: #0444AC">b-option</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;北京&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;beijing&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-option</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">              &lt;</span><span style="color: #0444AC">b-option</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;南京&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;nanjing&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-option</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">              &lt;</span><span style="color: #0444AC">b-option</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;徐州&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;xuzhou&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-option</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;/</span><span style="color: #0444AC">b-select</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-col</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-row</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;出生日期&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">prop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;birthday&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-date-picker</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.birthday&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;date&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;出生日期&quot;</span></span>
<span class="line"><span style="color: #002339">        &gt;&lt;/</span><span style="color: #0444AC">b-date-picker</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;爱好&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">prop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;hobby&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-checkbox-group</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.hobby&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;打游戏&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">name</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;hobby&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;看电影&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">name</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;hobby&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;打篮球/运动&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">name</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;hobby&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;看书&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">name</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;hobby&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-checkbox</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-checkbox-group</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;性别&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">prop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;sex&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-radio-group</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.sex&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;男&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;male&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;女&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;female&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-radio-group</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;状态&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">prop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;status&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-switch</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formObj.status&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">true-value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;enable&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">false-value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;disable&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;large&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">open</span><span style="color: #002339">&gt;&lt;</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;启用&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">close</span><span style="color: #002339">&gt;&lt;</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;禁用&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-switch</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;primary&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;submitForm&quot;</span><span style="color: #002339">&gt;提交&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;resetForm&quot;</span><span style="color: #002339">&gt;重置&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">b-form</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">ruleValidate</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">  name: [{ required: </span><span style="color: #174781">true</span><span style="color: #002339">, message: </span><span style="color: #A44185">&#39;用户名不能为空&#39;</span><span style="color: #002339">, trigger: </span><span style="color: #A44185">&#39;blur&#39;</span><span style="color: #002339"> }],</span></span>
<span class="line"><span style="color: #002339">  region: [{ required: </span><span style="color: #174781">true</span><span style="color: #002339">, message: </span><span style="color: #A44185">&#39;户籍地不能为空&#39;</span><span style="color: #002339">, trigger: </span><span style="color: #A44185">&#39;change&#39;</span><span style="color: #002339"> }],</span></span>
<span class="line"><span style="color: #002339">  age: [</span></span>
<span class="line"><span style="color: #002339">    { required: </span><span style="color: #174781">true</span><span style="color: #002339">, type: </span><span style="color: #A44185">&#39;number&#39;</span><span style="color: #002339">, message: </span><span style="color: #A44185">&#39;年龄不为空&#39;</span><span style="color: #002339">, trigger: </span><span style="color: #A44185">&#39;change&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">    { type: </span><span style="color: #A44185">&#39;number&#39;</span><span style="color: #002339">, min: </span><span style="color: #174781">18</span><span style="color: #002339">, trigger: </span><span style="color: #A44185">&#39;change&#39;</span><span style="color: #002339">, message: </span><span style="color: #A44185">&#39;年龄必须在18以上&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">  ],</span></span>
<span class="line"><span style="color: #002339">  hobby: [{ type: </span><span style="color: #A44185">&#39;array&#39;</span><span style="color: #002339">, required: </span><span style="color: #174781">true</span><span style="color: #002339">, message: </span><span style="color: #A44185">&#39;请至少选择一个爱好&#39;</span><span style="color: #002339">, trigger: </span><span style="color: #A44185">&#39;change&#39;</span><span style="color: #002339"> }],</span></span>
<span class="line"><span style="color: #002339">  sex: [{ required: </span><span style="color: #174781">true</span><span style="color: #002339">, message: </span><span style="color: #A44185">&#39;性别必选&#39;</span><span style="color: #002339">, trigger: </span><span style="color: #A44185">&#39;change&#39;</span><span style="color: #002339"> }],</span></span>
<span class="line"><span style="color: #002339">  birthday: [{ required: </span><span style="color: #174781">true</span><span style="color: #002339">, type: </span><span style="color: #A44185">&#39;date&#39;</span><span style="color: #002339">, message: </span><span style="color: #A44185">&#39;出生日期必选&#39;</span><span style="color: #002339">, trigger: </span><span style="color: #A44185">&#39;blur&#39;</span><span style="color: #002339"> }],</span></span>
<span class="line"><span style="color: #002339">  mail: [</span></span>
<span class="line"><span style="color: #002339">    { required: </span><span style="color: #174781">true</span><span style="color: #002339">, message: </span><span style="color: #A44185">&#39;邮箱不能为空&#39;</span><span style="color: #002339">, trigger: </span><span style="color: #A44185">&#39;blur&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">    { type: </span><span style="color: #A44185">&#39;email&#39;</span><span style="color: #002339">, message: </span><span style="color: #A44185">&#39;邮箱格式不正确&#39;</span><span style="color: #002339">, trigger: </span><span style="color: #A44185">&#39;blur&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">  ]</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">ruleForm</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">null</span><span style="color: #002339">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">formObj</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">({</span></span>
<span class="line"><span style="color: #002339">  name: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  age: </span><span style="color: #174781">null</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  mail: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  region: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  hobby: [],</span></span>
<span class="line"><span style="color: #002339">  sex: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  status: </span><span style="color: #A44185">&#39;disable&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  birthday: </span><span style="color: #A44185">&#39;&#39;</span></span>
<span class="line"><span style="color: #002339">})</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">submitForm</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">ruleForm</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">?.</span><span style="color: #7EB233">validate</span><span style="color: #002339">(</span><span style="color: #B1108E">valid</span><span style="color: #002339"> </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">valid</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #7EB233">alert</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;submit!&#39;</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">    } </span><span style="color: #7B30D0">else</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;error submit!!&#39;</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #174781">false</span></span>
<span class="line"><span style="color: #002339">    }</span></span>
<span class="line"><span style="color: #002339">  })</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">resetForm</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">ruleForm</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">?.</span><span style="color: #7EB233">resetFields</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="自定义校验规则" tabindex="-1">自定义校验规则 <a class="header-anchor" href="#自定义校验规则" aria-label="Permalink to &quot;自定义校验规则&quot;">​</a></h2><p>可以自定义校验函数来实现更多的校验判定</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Form\CustomValidator.vue" relativepath="./demo/Form/CustomValidator.vue"><section class="vitepress-demo-preview-preview"><!--[--><div style="width:500px;"><form class="bin-form demo-ruleForm"><!--[--><div class="bin-form-item bin-form-item--feedback"><!--[--><label for="pass" class="bin-form-item__label" style="width:100px;"><!--[-->密码<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-input-wrapper bin-input-type-password"><!--[--><!----><input autocomplete="new-password" type="password" class="bin-input" placeholder="" value="" number="false"><!----><!----><!----><!----><!----><!--]--></div><!--]--><!----></div></div><div class="bin-form-item bin-form-item--feedback"><!--[--><label for="checkPass" class="bin-form-item__label" style="width:100px;"><!--[-->确认密码<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-input-wrapper bin-input-type-password"><!--[--><!----><input autocomplete="new-password" type="password" class="bin-input" placeholder="" value="" number="false"><!----><!----><!----><!----><!----><!--]--></div><!--]--><!----></div></div><div class="bin-form-item bin-form-item--feedback"><!--[--><label for="age" class="bin-form-item__label" style="width:100px;"><!--[-->年龄<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div class="bin-input-wrapper bin-input-type-number"><!--[--><!----><input autocomplete="off" type="number" class="bin-input" placeholder="" value="" number="false"><!----><!----><!----><!----><!----><!--]--></div><!--]--><!----></div></div><div class="bin-form-item bin-form-item--feedback"><!--[--><!----><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);padding-left:100px;"><!--[--><button class="bin-button bin-button--primary" type="button"><!----><span class="bin-button__content" style=""><!--[-->提交<!--]--></span></button><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->重置<!--]--></span></button><!--]--><!----></div></div><!--]--></form></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 500px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">ref</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ruleFormRef&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">:model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ruleForm&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">status-icon</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">:rules</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;rules&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">label-width</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;100px&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demo-ruleForm&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;密码&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">prop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;pass&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ruleForm.pass&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;password&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">autocomplete</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;off&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;确认密码&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">prop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;checkPass&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ruleForm.checkPass&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;password&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">autocomplete</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;off&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;年龄&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">prop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;age&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model.number</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ruleForm.age&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;number&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;primary&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;submitForm&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">提交</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;resetForm&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">重置</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97; font-style: italic">checkAge</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">rule</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">callback</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #3E8FB0">!</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">callback</span><span style="color: #E0DEF4">(</span><span style="color: #3E8FB0">new</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">Error</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;年龄不能为空&#39;</span><span style="color: #E0DEF4">))</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #EA9A97">setTimeout</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #3E8FB0">!</span><span style="color: #E0DEF4; font-style: italic">Number</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">isInteger</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">)) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #EA9A97">callback</span><span style="color: #E0DEF4">(</span><span style="color: #3E8FB0">new</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">Error</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;请输入数字值&#39;</span><span style="color: #E0DEF4">))</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">else</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">&lt;</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #EA9A97">callback</span><span style="color: #E0DEF4">(</span><span style="color: #3E8FB0">new</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">Error</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;必须年满18岁&#39;</span><span style="color: #E0DEF4">))</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">else</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #EA9A97">callback</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1000</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97; font-style: italic">validatePass</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">rule</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">callback</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #EA9A97">callback</span><span style="color: #E0DEF4">(</span><span style="color: #3E8FB0">new</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">Error</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;请输入密码&#39;</span><span style="color: #E0DEF4">))</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">else</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">ruleForm</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">checkPass</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">!==</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #E0DEF4; font-style: italic">ruleFormRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">?.</span><span style="color: #EA9A97">validateField</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;checkPass&#39;</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #EA9A97">callback</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97; font-style: italic">validatePass2</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">rule</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">callback</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #EA9A97">callback</span><span style="color: #E0DEF4">(</span><span style="color: #3E8FB0">new</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">Error</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;请再次输入密码&#39;</span><span style="color: #E0DEF4">))</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">else</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">!==</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">ruleForm</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">pass</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #EA9A97">callback</span><span style="color: #E0DEF4">(</span><span style="color: #3E8FB0">new</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">Error</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;两次输入密码不一致!&#39;</span><span style="color: #E0DEF4">))</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">else</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #EA9A97">callback</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">ruleFormRef</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">null</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">rules</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  pass</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> validator</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">validatePass</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;blur&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  checkPass</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> validator</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">validatePass2</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;blur&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> validator</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">checkAge</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;blur&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">ruleForm</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  pass</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  checkPass</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span></span>
<span class="line"><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">submitForm</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">ruleFormRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">?.</span><span style="color: #EA9A97">validate</span><span style="color: #E0DEF4">(</span><span style="color: #C4A7E7; font-style: italic">valid</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">valid</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #EA9A97">alert</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;submit!&#39;</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">else</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;error submit!!&#39;</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">false</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">resetForm</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">ruleFormRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">?.</span><span style="color: #EA9A97">resetFields</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 500px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-form</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">ref</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ruleFormRef&quot;</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">:model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ruleForm&quot;</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">status-icon</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">:rules</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;rules&quot;</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">label-width</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;100px&quot;</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demo-ruleForm&quot;</span></span>
<span class="line"><span style="color: #002339">    &gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;密码&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">prop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;pass&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-input</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ruleForm.pass&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;password&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">autocomplete</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;off&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;确认密码&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">prop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;checkPass&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-input</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ruleForm.checkPass&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;password&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">autocomplete</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;off&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;年龄&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">prop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;age&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-input</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model.number</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ruleForm.age&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;number&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;primary&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;submitForm&quot;</span><span style="color: #002339">&gt;提交&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;resetForm&quot;</span><span style="color: #002339">&gt;重置&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">b-form</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #7EB233">checkAge</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> (</span><span style="color: #B1108E">rule</span><span style="color: #002339">, </span><span style="color: #B1108E">value</span><span style="color: #002339">, </span><span style="color: #B1108E">callback</span><span style="color: #002339">) </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #7B30D0">!</span><span style="color: #2F86D2">value</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #7EB233">callback</span><span style="color: #002339">(</span><span style="color: #7B30D0">new</span><span style="color: #002339"> </span><span style="color: #7EB233">Error</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;年龄不能为空&#39;</span><span style="color: #002339">))</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7EB233">setTimeout</span><span style="color: #002339">(() </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #7B30D0">!</span><span style="color: #2F86D2">Number</span><span style="color: #002339">.</span><span style="color: #7EB233">isInteger</span><span style="color: #002339">(</span><span style="color: #2F86D2">value</span><span style="color: #002339">)) {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #7EB233">callback</span><span style="color: #002339">(</span><span style="color: #7B30D0">new</span><span style="color: #002339"> </span><span style="color: #7EB233">Error</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;请输入数字值&#39;</span><span style="color: #002339">))</span></span>
<span class="line"><span style="color: #002339">    } </span><span style="color: #7B30D0">else</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">&lt;</span><span style="color: #002339"> </span><span style="color: #174781">18</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #7EB233">callback</span><span style="color: #002339">(</span><span style="color: #7B30D0">new</span><span style="color: #002339"> </span><span style="color: #7EB233">Error</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;必须年满18岁&#39;</span><span style="color: #002339">))</span></span>
<span class="line"><span style="color: #002339">      } </span><span style="color: #7B30D0">else</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #7EB233">callback</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    }</span></span>
<span class="line"><span style="color: #002339">  }, </span><span style="color: #174781">1000</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #7EB233">validatePass</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> (</span><span style="color: #B1108E">rule</span><span style="color: #002339">, </span><span style="color: #B1108E">value</span><span style="color: #002339">, </span><span style="color: #B1108E">callback</span><span style="color: #002339">) </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7EB233">callback</span><span style="color: #002339">(</span><span style="color: #7B30D0">new</span><span style="color: #002339"> </span><span style="color: #7EB233">Error</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;请输入密码&#39;</span><span style="color: #002339">))</span></span>
<span class="line"><span style="color: #002339">  } </span><span style="color: #7B30D0">else</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">ruleForm</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #2F86D2">checkPass</span><span style="color: #002339"> </span><span style="color: #7B30D0">!==</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #2F86D2">ruleFormRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">?.</span><span style="color: #7EB233">validateField</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;checkPass&#39;</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">    }</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7EB233">callback</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #7EB233">validatePass2</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> (</span><span style="color: #B1108E">rule</span><span style="color: #002339">, </span><span style="color: #B1108E">value</span><span style="color: #002339">, </span><span style="color: #B1108E">callback</span><span style="color: #002339">) </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7EB233">callback</span><span style="color: #002339">(</span><span style="color: #7B30D0">new</span><span style="color: #002339"> </span><span style="color: #7EB233">Error</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;请再次输入密码&#39;</span><span style="color: #002339">))</span></span>
<span class="line"><span style="color: #002339">  } </span><span style="color: #7B30D0">else</span><span style="color: #002339"> </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">!==</span><span style="color: #002339"> </span><span style="color: #2F86D2">ruleForm</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #2F86D2">pass</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7EB233">callback</span><span style="color: #002339">(</span><span style="color: #7B30D0">new</span><span style="color: #002339"> </span><span style="color: #7EB233">Error</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;两次输入密码不一致!&#39;</span><span style="color: #002339">))</span></span>
<span class="line"><span style="color: #002339">  } </span><span style="color: #7B30D0">else</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7EB233">callback</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">ruleFormRef</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">null</span><span style="color: #002339">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">rules</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">({</span></span>
<span class="line"><span style="color: #002339">  pass: [{ validator: </span><span style="color: #2F86D2">validatePass</span><span style="color: #002339">, trigger: </span><span style="color: #A44185">&#39;blur&#39;</span><span style="color: #002339"> }],</span></span>
<span class="line"><span style="color: #002339">  checkPass: [{ validator: </span><span style="color: #2F86D2">validatePass2</span><span style="color: #002339">, trigger: </span><span style="color: #A44185">&#39;blur&#39;</span><span style="color: #002339"> }],</span></span>
<span class="line"><span style="color: #002339">  age: [{ validator: </span><span style="color: #2F86D2">checkAge</span><span style="color: #002339">, trigger: </span><span style="color: #A44185">&#39;blur&#39;</span><span style="color: #002339"> }]</span></span>
<span class="line"><span style="color: #002339">})</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">ruleForm</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">({</span></span>
<span class="line"><span style="color: #002339">  pass: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  checkPass: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  age: </span><span style="color: #A44185">&#39;&#39;</span></span>
<span class="line"><span style="color: #002339">})</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">submitForm</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">ruleFormRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">?.</span><span style="color: #7EB233">validate</span><span style="color: #002339">(</span><span style="color: #B1108E">valid</span><span style="color: #002339"> </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">valid</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #7EB233">alert</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;submit!&#39;</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">    } </span><span style="color: #7B30D0">else</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;error submit!!&#39;</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #174781">false</span></span>
<span class="line"><span style="color: #002339">    }</span></span>
<span class="line"><span style="color: #002339">  })</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">resetForm</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">ruleFormRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">?.</span><span style="color: #7EB233">resetFields</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="动态增加校验" tabindex="-1">动态增加校验 <a class="header-anchor" href="#动态增加校验" aria-label="Permalink to &quot;动态增加校验&quot;">​</a></h2><p>可以动态的配置校验规则</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Form\Add.vue" relativepath="./demo/Form/Add.vue"><section class="vitepress-demo-preview-preview"><!--[--><div style="width:500px;"><form class="bin-form demo-dynamic"><!--[--><!--[--><div class="bin-form-item is-required"><!--[--><label for="domains.0.value" class="bin-form-item__label" style="width:100px;"><!--[-->域名0<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);"><!--[--><div flex="box:last"><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input" placeholder="" value="" number="false"><!----><!----><!----><!----><!----><!--]--></div><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->删除<!--]--></span></button></div><!--]--><!----></div></div><!--]--><div class="bin-form-item"><!--[--><!----><!--]--><div class="bin-form-item__content" style="width:calc(100% - 100px);padding-left:100px;"><!--[--><button class="bin-button bin-button--primary" type="button"><!----><span class="bin-button__content" style=""><!--[-->提交<!--]--></span></button><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->新增域名<!--]--></span></button><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->重置<!--]--></span></button><!--]--><!----></div></div><!--]--></form></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 500px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">ref</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formRef&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;dynamicValidateForm&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label-width</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;100px&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demo-dynamic&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-for</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;(domain, index) in dynamicValidateForm.domains&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:key</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;domain.key&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;&#39;域名&#39; + index&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:prop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;&#39;domains.&#39; + index + &#39;.value&#39;&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:rules</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;{</span></span>
<span class="line"><span style="color: #F6C177">          required: true,</span></span>
<span class="line"><span style="color: #F6C177">          message: &#39;域名不能为空&#39;,</span></span>
<span class="line"><span style="color: #F6C177">          trigger: &#39;blur&#39;</span></span>
<span class="line"><span style="color: #F6C177">        }&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;box:last&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;domain.value&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;removeDomain(domain)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">删除</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;primary&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;submitForm&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">提交</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;addDomain&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">新增域名</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;resetForm&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">重置</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">dynamicValidateForm</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  domains</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  ]</span></span>
<span class="line"><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">formRef</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">null</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">submitForm</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">formRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">?.</span><span style="color: #EA9A97">validate</span><span style="color: #E0DEF4">(</span><span style="color: #C4A7E7; font-style: italic">valid</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">valid</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #EA9A97">alert</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;submit!&#39;</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">else</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;error submit!!&#39;</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">false</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">resetForm</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">formRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">?.</span><span style="color: #EA9A97">resetFields</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">removeDomain</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">item</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">dynamicValidateForm</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">domains</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">indexOf</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">item</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">!==</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">-</span><span style="color: #EA9A97">1</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #E0DEF4; font-style: italic">dynamicValidateForm</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">domains</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">splice</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">addDomain</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">dynamicValidateForm</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">domains</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">push</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">Date</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">now</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 500px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-form</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">ref</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formRef&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;dynamicValidateForm&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label-width</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;100px&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demo-dynamic&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-for</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;(domain, index) in dynamicValidateForm.domains&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:key</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;domain.key&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;&#39;域名&#39; + index&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:prop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;&#39;domains.&#39; + index + &#39;.value&#39;&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:rules</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;{</span></span>
<span class="line"><span style="color: #A44185">          required: true,</span></span>
<span class="line"><span style="color: #A44185">          message: &#39;域名不能为空&#39;,</span></span>
<span class="line"><span style="color: #A44185">          trigger: &#39;blur&#39;</span></span>
<span class="line"><span style="color: #A44185">        }&quot;</span></span>
<span class="line"><span style="color: #002339">      &gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;box:last&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-input</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;domain.value&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;removeDomain(domain)&quot;</span><span style="color: #002339">&gt;删除&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;primary&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;submitForm&quot;</span><span style="color: #002339">&gt;提交&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;addDomain&quot;</span><span style="color: #002339">&gt;新增域名&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;resetForm&quot;</span><span style="color: #002339">&gt;重置&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">b-form</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">dynamicValidateForm</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">({</span></span>
<span class="line"><span style="color: #002339">  domains: [</span></span>
<span class="line"><span style="color: #002339">    {</span></span>
<span class="line"><span style="color: #002339">      value: </span><span style="color: #A44185">&#39;&#39;</span></span>
<span class="line"><span style="color: #002339">    }</span></span>
<span class="line"><span style="color: #002339">  ]</span></span>
<span class="line"><span style="color: #002339">})</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">formRef</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">null</span><span style="color: #002339">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">submitForm</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">formRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">?.</span><span style="color: #7EB233">validate</span><span style="color: #002339">(</span><span style="color: #B1108E">valid</span><span style="color: #002339"> </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">valid</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #7EB233">alert</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;submit!&#39;</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">    } </span><span style="color: #7B30D0">else</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;error submit!!&#39;</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #174781">false</span></span>
<span class="line"><span style="color: #002339">    }</span></span>
<span class="line"><span style="color: #002339">  })</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">resetForm</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">formRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">?.</span><span style="color: #7EB233">resetFields</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">removeDomain</span><span style="color: #002339">(</span><span style="color: #B1108E">item</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">index</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">dynamicValidateForm</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #2F86D2">domains</span><span style="color: #002339">.</span><span style="color: #7EB233">indexOf</span><span style="color: #002339">(</span><span style="color: #2F86D2">item</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">index</span><span style="color: #002339"> </span><span style="color: #7B30D0">!==</span><span style="color: #002339"> </span><span style="color: #7B30D0">-</span><span style="color: #174781">1</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #2F86D2">dynamicValidateForm</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #2F86D2">domains</span><span style="color: #002339">.</span><span style="color: #7EB233">splice</span><span style="color: #002339">(</span><span style="color: #2F86D2">index</span><span style="color: #002339">, </span><span style="color: #174781">1</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">addDomain</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">dynamicValidateForm</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #2F86D2">domains</span><span style="color: #002339">.</span><span style="color: #7EB233">push</span><span style="color: #002339">({</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    key: </span><span style="color: #2F86D2">Date</span><span style="color: #002339">.</span><span style="color: #7EB233">now</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">  })</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="form-props" tabindex="-1">Form Props <a class="header-anchor" href="#form-props" aria-label="Permalink to &quot;Form Props&quot;">​</a></h2><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>model</td><td>表单数据对象</td><td>object</td><td>—</td><td>—</td></tr><tr><td>rules</td><td>表单验证规则</td><td>object</td><td>—</td><td>—</td></tr><tr><td>inline</td><td>行内表单模式</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>label-position</td><td>标签的位置，如果值为 left 或者 right 时，则需要设置 label-width</td><td>right/left/top</td><td>—</td><td>right</td></tr><tr><td>label-width</td><td>表单域标签的宽度，例如 &#39;50px&#39;。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。</td><td>—</td><td>—</td><td>—</td></tr><tr><td>label-suffix</td><td>表单域标签的后缀</td><td>string</td><td>—</td><td>—</td></tr><tr><td>hide-required-asterisk</td><td>是否隐藏必填字段的标签旁边的红色*</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>show-message</td><td>是否显示校验错误信息</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>inline-message</td><td>是否以行内形式展示校验信息,此时右侧需要留出校验信息的显示宽度才可以正常使用</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>status-icon</td><td>是否在输入框中显示校验结果反馈图标</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>validate-on-rule-change</td><td>是否在 rules 属性改变后立即触发一次验证</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>size</td><td>用于控制该表单内组件的尺寸</td><td>string</td><td>large,default,small,mini</td><td>—</td></tr><tr><td>disabled</td><td>是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效</td><td>—</td><td>false</td><td></td></tr></tbody></table><h2 id="form-methods" tabindex="-1">Form Methods <a class="header-anchor" href="#form-methods" aria-label="Permalink to &quot;Form Methods&quot;">​</a></h2><table><thead><tr><th>方法名</th><th>说明</th><th>返回值</th></tr></thead><tbody><tr><td>validate</td><td>对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise</td><td>Function(callback: Function(boolean, object))</td></tr><tr><td>validateField</td><td>对部分表单字段进行校验的方法</td><td>Function(props: array、string, callback: Function(errorMessage: string))</td></tr><tr><td>resetFields</td><td>对整个表单进行重置，将所有字段值重置为初始值并移除校验结果</td><td>—</td></tr><tr><td>clearValidate</td><td>移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果</td><td>Function(props: array 、 string)</td></tr></tbody></table><h2 id="form-events" tabindex="-1">Form Events <a class="header-anchor" href="#form-events" aria-label="Permalink to &quot;Form Events&quot;">​</a></h2><table><thead><tr><th>方法名</th><th>说明</th><th>返回值</th></tr></thead><tbody><tr><td>validate</td><td>任一表单项被校验后触发</td><td>被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）</td></tr></tbody></table><h2 id="formitem-props" tabindex="-1">FormItem Props <a class="header-anchor" href="#formitem-props" aria-label="Permalink to &quot;FormItem Props&quot;">​</a></h2><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>prop</td><td>表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的</td><td>string</td><td>传入 Form 组件的 model 中的字段</td><td>—</td></tr><tr><td>label</td><td>标签文本</td><td>string</td><td>—</td><td>—</td></tr><tr><td>label-width</td><td>表单域标签的的宽度，例如 &#39;80px&#39;。支持 auto。</td><td>string</td><td>—</td><td>—</td></tr><tr><td>required</td><td>是否必填，如不设置，则会根据校验规则自动生成</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>rules</td><td>表单验证规则</td><td>object</td><td>—</td><td>—</td></tr><tr><td>error</td><td>表单域验证错误信息, 设置该值会使表单验证状态变为error，并显示该错误信息</td><td>string</td><td>—</td><td>—</td></tr><tr><td>show-message</td><td>是否显示校验错误信息</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>inline-message</td><td>以行内形式展示校验信息</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>size</td><td>用于控制该表单域下组件的尺寸</td><td>string</td><td>large,default,small,mini</td><td>—</td></tr></tbody></table><h2 id="formitem-slot" tabindex="-1">FormItem Slot <a class="header-anchor" href="#formitem-slot" aria-label="Permalink to &quot;FormItem Slot&quot;">​</a></h2><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>default</td><td>默认内容</td></tr><tr><td>label</td><td>标签文本的内容</td></tr></tbody></table><h2 id="formitem-scoped-slot" tabindex="-1">FormItem Scoped Slot <a class="header-anchor" href="#formitem-scoped-slot" aria-label="Permalink to &quot;FormItem Scoped Slot&quot;">​</a></h2><table error=""><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>error</td><td>自定义表单校验信息的显示方式，参数为</td></tr></tbody></table><h2 id="formitem-methods" tabindex="-1">FormItem Methods <a class="header-anchor" href="#formitem-methods" aria-label="Permalink to &quot;FormItem Methods&quot;">​</a></h2><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>resetField</td><td>对该表单项进行重置，将其值重置为初始值并移除校验结果</td></tr><tr><td>clearValidate</td><td>移除该表单项的校验结果</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-9f9999b2 data-v-61fb544c><!--[--><!--]--><!----><nav class="prev-next" data-v-61fb544c><div class="pager" data-v-61fb544c><a class="pager-link prev" href="/bin-ui-design/components/upload.html" data-v-61fb544c><span class="desc" data-v-61fb544c>Previous page</span><span class="title" data-v-61fb544c><i class="b-iconfont b-icon-cloud-upload"></i>上传<span>Upload</span></span></a></div><div class="pager" data-v-61fb544c><a class="pager-link next" href="/bin-ui-design/components/tree.html" data-v-61fb544c><span class="desc" data-v-61fb544c>Next page</span><span class="title" data-v-61fb544c><i class="b-iconfont b-icon-branches"></i>树结构<span>Tree</span></span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-10b21a41 data-v-1c165e87><div class="container" data-v-1c165e87><!----><p class="copyright" data-v-1c165e87>MIT Licensed | Copyright © 2023-present bin-ui-design</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"components_calendar.md\":\"ed1fb758\",\"components_affix.md\":\"c7b107b7\",\"components_back-top.md\":\"a90798a3\",\"components_breadcrumb.md\":\"e45c7120\",\"components_badge.md\":\"a83e273c\",\"components_alert.md\":\"fce5ac8e\",\"components_contextmenu.md\":\"3a8ef142\",\"components_circle.md\":\"7c03ee32\",\"components_config-provider.md\":\"bbf6fd0c\",\"components_checkbox.md\":\"2cb0b537\",\"components_carousel.md\":\"501e54e7\",\"components_empty.md\":\"0f6ba589\",\"components_layout.md\":\"e372cf7d\",\"components_count-to.md\":\"4af99aa6\",\"components_loading-bar.md\":\"dac78d00\",\"components_desc.md\":\"e468461f\",\"components_scrollbar.md\":\"291e9d8e\",\"components_anchor.md\":\"9b9a5663\",\"components_card.md\":\"8f27d101\",\"components_divider.md\":\"b50c7752\",\"docs_changelog.md\":\"deb42a54\",\"components_color-picker.md\":\"67dfd5c6\",\"components_notice.md\":\"a4721004\",\"docs_introduction.md\":\"e33e2b29\",\"index.md\":\"554113db\",\"components_button.md\":\"c7f6d651\",\"components_page.md\":\"8728f48d\",\"components_split.md\":\"383fbbe8\",\"docs_jsx.md\":\"58e48e69\",\"components_collapse.md\":\"39f1c339\",\"components_input-number.md\":\"b95178ec\",\"docs_common-directive.md\":\"79801c01\",\"docs_color-design.md\":\"1674c3b9\",\"components_trend.md\":\"2b24adde\",\"components_message-box.md\":\"5ea759a2\",\"components_dropdown.md\":\"13a35e2a\",\"components_upload.md\":\"5e2cedc1\",\"components_rate.md\":\"35271357\",\"docs_import-on-demand.md\":\"ffd56fe6\",\"components_radio.md\":\"5fd31931\",\"components_switch.md\":\"473de9e1\",\"docs_usage-sfc.md\":\"4b699947\",\"docs_common-transition.md\":\"3e08447c\",\"docs_installation.md\":\"f27febf3\",\"components_image.md\":\"30431bac\",\"docs_custom-theme.md\":\"f26d8f9a\",\"components_popper.md\":\"5c9082ec\",\"components_message.md\":\"d61ecb84\",\"components_steps.md\":\"de125854\",\"components_space.md\":\"20f9ed13\",\"components_input.md\":\"37684c1c\",\"components_tag.md\":\"17b4b0b1\",\"components_loading.md\":\"822d7cf0\",\"components_time-picker.md\":\"ca9c42c9\",\"components_slider.md\":\"fa819be3\",\"components_menu.md\":\"7998f13c\",\"components_skeleton.md\":\"54c428ce\",\"components_select.md\":\"d96ed960\",\"components_drawer.md\":\"7520003f\",\"components_popover.md\":\"7a2b8b43\",\"components_timeline.md\":\"e9bdf997\",\"docs_common-css.md\":\"2b6e0566\",\"components_progress.md\":\"4a41caad\",\"components_icon.md\":\"e611d267\",\"docs_common-api.md\":\"34166aab\",\"components_cascader.md\":\"9ad54021\",\"components_tooltip.md\":\"18368c1a\",\"components_grid.md\":\"d5620c5c\",\"components_tabs.md\":\"67864029\",\"components_modal.md\":\"0d1f6c25\",\"components_date-picker.md\":\"e2b2057a\",\"components_form.md\":\"5d25e7cb\",\"components_table.md\":\"6af60abd\",\"components_tree.md\":\"d80b44bd\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"BIN-UI-DESIGN\",\"description\":\"A Compontnts Lib for Vue3\",\"base\":\"/bin-ui-design/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"siteTitle\":\"BIN-UI-DESIGN\",\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"文档\",\"link\":\"/docs/introduction\",\"activeMatch\":\"/docs/\"},{\"text\":\"组件\",\"link\":\"/components/button\",\"activeMatch\":\"/components/\"},{\"text\":\"生态系统\",\"items\":[{\"text\":\"资源\",\"link\":\"\"},{\"text\":\"bin-admin-pro\",\"link\":\"https://wangbin3162.github.io/bin-admin-pro/\",\"target\":\"_blank\"},{\"text\":\"bin-datav\",\"link\":\"https://wangbin3162.github.io/bin-datav\",\"target\":\"_blank\"},{\"text\":\"bin-datav-schema\",\"link\":\"https://wangbin3162.github.io/bin-datav-schema/\",\"target\":\"_blank\"},{\"text\":\"官方库v3\",\"link\":\"\"},{\"text\":\"bin-ui-next\",\"link\":\"https://wangbin3162.github.io/bin-ui-next/\",\"target\":\"_blank\"},{\"text\":\"bin-editor-next\",\"link\":\"https://wangbin3162.github.io/bin-editor-next/\",\"target\":\"_blank\"},{\"text\":\"bin-charts-next\",\"link\":\"https://wangbin3162.github.io/bin-charts-next/\",\"target\":\"_blank\"},{\"text\":\"官方库v2\",\"link\":\"\"},{\"text\":\"bin-ui\",\"link\":\"https://wangbin3162.github.io/bin-ui/\",\"target\":\"_blank\"},{\"text\":\"bin-ace-editor\",\"link\":\"https://wangbin3162.github.io/bin-ace-editor/\",\"target\":\"_blank\"},{\"text\":\"bin-charts\",\"link\":\"https://wangbin3162.github.io/bin-charts/\",\"target\":\"_blank\"},{\"text\":\"bin-tree-org\",\"link\":\"https://wangbin3162.github.io/bin-tree-org/\",\"target\":\"_blank\"},{\"text\":\"动画库\",\"link\":\"\"},{\"text\":\"bin-animation\",\"link\":\"https://wangbin3162.github.io/bin-animation/\",\"target\":\"_blank\"},{\"text\":\"bin-keyframe-animation\",\"link\":\"https://wangbin3162.github.io/bin-keyframe-animation/\",\"target\":\"_blank\"}]}],\"sidebar\":{\"/docs/\":[{\"text\":\"开始\",\"items\":[{\"text\":\"介绍\",\"link\":\"/docs/introduction\"},{\"text\":\"变更日志\",\"link\":\"/docs/changelog\"}]},{\"text\":\"快速上手\",\"items\":[{\"text\":\"安装\",\"link\":\"/docs/installation\"},{\"text\":\"在 SFC 中使用\",\"link\":\"/docs/usage-sfc\"},{\"text\":\"按需引入\",\"link\":\"/docs/import-on-demand\"}]},{\"text\":\"指南\",\"items\":[{\"text\":\"JSX & TSX\",\"link\":\"/docs/jsx\"},{\"text\":\"色彩设计\",\"link\":\"/docs/color-design\"},{\"text\":\"调整主题\",\"link\":\"/docs/custom-theme\"},{\"text\":\"通用样式\",\"link\":\"/docs/common-css\"},{\"text\":\"帮助函数\",\"link\":\"/docs/common-api\"},{\"text\":\"组件指令\",\"link\":\"/docs/common-directive\"},{\"text\":\"内置动画\",\"link\":\"/docs/common-transition\"}]}],\"/components/\":[{\"text\":\"通用组件 (8)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-fire\\\"></i>图标<span>Icon</span>\",\"link\":\"/components/icon\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-Youtube\\\"></i>按钮<span>Button</span>\",\"link\":\"/components/button\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-creditcard\\\"></i>卡片<span>Card</span>\",\"link\":\"/components/card\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-interation\\\"></i>折叠面板<span>Collapse</span>\",\"link\":\"/components/collapse\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-line\\\"></i>分割线<span>Divider</span>\",\"link\":\"/components/divider\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-caret-down\\\"></i>下拉菜单<span>Dropdown</span>\",\"link\":\"/components/dropdown\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-tags\\\"></i>标签<span>Tag</span>\",\"link\":\"/components/tag\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-image\\\"></i>图片<span>Image</span>\",\"link\":\"/components/image\"}]},{\"text\":\"布局组件 (4)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-layout\\\"></i>布局组件<span>Layout</span>\",\"link\":\"/components/layout\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-appstore\\\"></i>栅格<span>Grid</span>\",\"link\":\"/components/grid\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-swap\\\"></i>间距<span>Space</span>\",\"link\":\"/components/space\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-block\\\"></i>分割面板<span>Split</span>\",\"link\":\"/components/split\"}]},{\"text\":\"数据录入组件 (14)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-edit-square\\\"></i>输入框<span>Input</span>\",\"link\":\"/components/input\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-shake\\\"></i>数字输入<span>InputNumber</span>\",\"link\":\"/components/input-number\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-plus-circle\\\"></i>单选框<span>Radio</span>\",\"link\":\"/components/radio\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-check-square\\\"></i>多选框<span>Checkbox</span>\",\"link\":\"/components/checkbox\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-build\\\"></i>开关<span>Switch</span>\",\"link\":\"/components/switch\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-unorderedlist\\\"></i>选择器<span>Select</span>\",\"link\":\"/components/select\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-pic-left\\\"></i>级联选择<span>Cascader</span>\",\"link\":\"/components/cascader\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-calendar\\\"></i>日期选择器<span>DatePicker</span>\",\"link\":\"/components/date-picker\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-time-circle\\\"></i>时间选择器<span>TimePicker</span>\",\"link\":\"/components/time-picker\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-bg-colors\\\"></i>颜色选择器<span>ColorPicker</span>\",\"link\":\"/components/color-picker\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-star\\\"></i>评分<span>Rate</span>\",\"link\":\"/components/rate\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-minus\\\"></i>滑块<span>Slider</span>\",\"link\":\"/components/slider\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-cloud-upload\\\"></i>上传<span>Upload</span>\",\"link\":\"/components/upload\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-reconciliation\\\"></i>表单<span>Form</span>\",\"link\":\"/components/form\"}]},{\"text\":\"数据展示组件 (9)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-branches\\\"></i>树结构<span>Tree</span>\",\"link\":\"/components/tree\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-table\\\"></i>表格<span>Table</span>\",\"link\":\"/components/table\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-read\\\"></i>分页<span>Page</span>\",\"link\":\"/components/page\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-unorderedlist\\\"></i>描述<span>Desc</span>\",\"link\":\"/components/desc\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-arrowdown\\\"></i>时间线<span>Timeline</span>\",\"link\":\"/components/timeline\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-calendar-fill\\\"></i>日历<span>Calendar</span>\",\"link\":\"/components/calendar\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-appstore-fill\\\"></i>轮播<span>Carousel</span>\",\"link\":\"/components/carousel\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-orderedlist\\\"></i>数字动画<span>CountTo</span>\",\"link\":\"/components/count-to\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-caret-up\\\"></i>趋势标记<span>Trend</span>\",\"link\":\"/components/trend\"}]},{\"text\":\"导航组件 (8)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-pushpin\\\"></i>图钉<span>Affix</span>\",\"link\":\"/components/affix\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-attachment\\\"></i>锚点<span>Anchor</span>\",\"link\":\"/components/anchor\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-up\\\"></i>返回顶部<span>BackTop</span>\",\"link\":\"/components/back-top\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-right\\\"></i>面包屑<span>Breadcrumb</span>\",\"link\":\"/components/breadcrumb\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-minus\\\"></i>加载条<span>Loading Bar</span>\",\"link\":\"/components/loading-bar\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-menu\\\"></i>菜单<span>Menu</span>\",\"link\":\"/components/menu\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-project\\\"></i>标签页<span>Tabs</span>\",\"link\":\"/components/tabs\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-arrowright\\\"></i>步骤<span>Steps</span>\",\"link\":\"/components/steps\"}]},{\"text\":\"反馈组件 (13)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-error-fill\\\"></i>警告信息<span>Alert</span>\",\"link\":\"/components/alert\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-border\\\"></i>标记<span>Badge</span>\",\"link\":\"/components/badge\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-idcard\\\"></i>模态框<span>Modal</span>\",\"link\":\"/components/modal\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-message\\\"></i>消息提示<span>Message</span>\",\"link\":\"/components/message\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-mail\\\"></i>弹框提示<span>MessageBox</span>\",\"link\":\"/components/message-box\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-notification\\\"></i>通知<span>Notice</span>\",\"link\":\"/components/notice\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-info-circle\\\"></i>弹出提示<span>Tooltip</span>\",\"link\":\"/components/tooltip\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-question-circle\\\"></i>弹出信息<span>Popover</span>\",\"link\":\"/components/popover\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-build\\\"></i>抽屉<span>Drawer</span>\",\"link\":\"/components/drawer\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-sever-fill\\\"></i>骨架屏<span>Skeleton</span>\",\"link\":\"/components/skeleton\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-loading\\\"></i>加载<span>Loading</span>\",\"link\":\"/components/loading\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-hourglass\\\"></i>进度条<span>Progress</span>\",\"link\":\"/components/progress\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-redo\\\"></i>进度环<span>Circle</span>\",\"link\":\"/components/circle\"}]},{\"text\":\"内置组件 (4)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-border\\\"></i>空状态<span>Empty</span>\",\"link\":\"/components/empty\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-container\\\"></i>滚动组件<span>Scrollbar</span>\",\"link\":\"/components/scrollbar\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-pic-center\\\"></i>弹层<span>Popper</span>\",\"link\":\"/components/popper\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-menu\\\"></i>右键菜单<span>Contextmenu</span>\",\"link\":\"/components/contextmenu\"}]},{\"text\":\"配置组件 (1)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-setting\\\"></i>全局配置<span>ConfigProvider</span>\",\"link\":\"/components/config-provider\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/wangbin3162/bin-ui-design\"}],\"footer\":{\"copyright\":\"MIT Licensed | Copyright © 2023-present bin-ui-design\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>